<template>
  <div class="home">
    <div class="header">
      <div class="box1"></div>
      <div class="box2"><h1>新型冠状肺炎实时监测</h1></div>
      <!-- 时间 -->
      <div class="box3">当前时间:{{ time }}</div>
    </div>
    <div class="cont">
      <div class="box1">
        <div class="a1">
          <dv-border-box-12>
            <div id="main" style="width: 100%; height: 100%"></div>
          </dv-border-box-12>
        </div>
        <div class="a2">
          <dv-border-box-12
            ><div id="main2" style="width: 100%; height: 100%"></div
          ></dv-border-box-12>
        </div>
        <div class="a3">
          <dv-border-box-12>
            <div id="main1" style="width: 100%; height: 100%"></div>
          </dv-border-box-12>
        </div>
      </div>
      <div class="box2">
        <div class="box">
          <dv-border-box-8 :reverse="true" class="c1">
            <span class="div1">12345</span>
            <span class="div1">12345</span>
            <span class="div1">12345</span>
            <span class="div1">12345</span></dv-border-box-8
          >
          <div class="c2">
            <span class="div1">累计确诊</span>
            <span class="div1">现存确诊</span>
            <span class="div1">累计治愈</span>
            <span class="div1">累计死亡</span>
          </div>
        </div>
        <div class="lj">累计确诊</div>
        <div class="xc">现存确诊</div>
        <img src="../assets/image/map.png" alt="" class="img ss" />
        <img src="../assets/image/jt.png" alt="" class="img1 ss1" />
        <img src="../assets/image/lbx.png" class="img2 ss2" alt="" />
        <div id="main7" style="width: 100%; height: 100%"></div>
      </div>
      <div class="box3">
        <div class="b1">
          <dv-border-box-12
            ><div id="main4" style="width: 100%; height: 100%"></div
          ></dv-border-box-12>
        </div>
        <div class="b2">
          <dv-border-box-12>
            <div id="main5" style="width: 100%; height: 100%"></div
          ></dv-border-box-12>
        </div>
        <div class="b3">
          <dv-border-box-12
            ><div id="main6" style="width: 100%; height: 100%"></div
          ></dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/http.js";
import * as echarts from "echarts";
import $ from "jquery";
import world from '@/world'
import nameMap from '@/nameMap'
export default {
  data() {
    return {
      time: "",
      list: [], // 存放左边第一个数据
      list3: [], // 存放右边第一个数据
      list4: [], //右边第三个数据
    };
  },
  methods: {
    toTimeFormate(date) {
      let Y = date.getFullYear();
      let M =
        date.getMonth() + 1 - 0 >= 10
          ? Number(date.getMonth()) + 1
          : "0" + (Number(date.getMonth()) + 1);
      let D = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
      let h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
      let m =
        date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
      let s =
        date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();
      return Y + "年" + M + "月" + D + "-" + h + "时" + m + "分" + s + "秒";
    },
    //左边第一个盒子新增确诊TOP10
    async leftone() {
      var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
      this.list = data.countryAddConfirmRankList;
      var res = [];
      var res1 = [];
      this.list.forEach((item) => {
        res.push(item.nation);
        res1.push(item.addConfirm);
      });

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "新增确诊TOP10",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "15%",
          bottom: "12%",
        },
        xAxis: [
          {
            type: "category",
            data: res,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 14,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: res1,
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            // label: {
            //     normal: {
            //         show: true,
            //         lineHeight: 30,
            //         width: 80,
            //         height: 30,
            //         backgroundColor: 'rgba(0,160,221,0.1)',
            //         borderRadius: 200,
            //         position: ['-8', '-60'],
            //         distance: 1,
            //         formatter: [
            //             '    {d|●}',
            //             ' {a|{c}}     \n',
            //             '    {b|}'
            //         ].join(','),
            //         rich: {
            //             d: {
            //                 color: '#3CDDCF',
            //             },
            //             a: {
            //                 color: '#fff',
            //                 align: 'center',
            //             },
            //             b: {
            //                 width: 1,
            //                 height: 30,
            //                 borderWidth: 1,
            //                 borderColor: '#234e6c',
            //                 align: 'left'
            //             },
            //         }
            //     }
            // }
          },
        ],
      };
      option && myChart.setOption(option);
    },
    //左边第二个盒子 大洲感染总人数趋势图
    async lefttow() {
      var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
      var list2 = data.continentStatis;
      var arr = [];
      var arr1 = [];
      var arr2 = [];
      var arr3 = [];
      var arr4 = [];
      var date = [];
      list2.forEach((item) => {
        date.push(item.date);
        arr.push(item.statis["亚洲"]);
        arr1.push(item.statis["其他"]);
        arr2.push(item.statis["北美洲"]);
        arr3.push(item.statis["大洋洲"]);
        arr4.push(item.statis["欧洲"]);
      });
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "大洲感染总人数趋势图",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["亚洲", "其他", "北美洲", "大洋洲", "欧洲"],
          top: "50px",
          textStyle: {
            color: "#4c9bfd",
            fontSize: 12,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: "60%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "亚洲",
            type: "line",
            stack: "Total",
            data: arr,
          },
          {
            name: "其他",
            type: "line",
            stack: "Total",
            data: arr1,
          },
          {
            name: "北美洲",
            type: "line",
            stack: "Total",
            data: arr2,
          },
          {
            name: "大洋洲",
            type: "line",
            stack: "Total",
            data: arr3,
          },
          {
            name: "欧洲",
            type: "line",
            stack: "Total",
            data: arr4,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    //左边第三个盒子
    async leftthree() {
      var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
       var list3 = data.continentStatis
       var arr1 = []
       var arr2 = []
       list3.forEach(item=>{
         arr1.push(item.statis['北美洲'])
         arr2.push(item.statis['欧洲'])
       })
       var sum1 = 0 
       var sum2 = 0
       arr1.forEach(item=>{
         sum1+=item
       })
         arr2.forEach(item=>{
         sum2+=item
       })
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;
    option = {
       title: {
          text: "大洲感染人数饼状图",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '89%',
    left: 'center',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: sum1, name: '北美洲' },
        { value: sum2, name: '欧洲' },
     
      ]
    }
  ]
};
      option && myChart.setOption(option);
    },
    // 右边第一个盒子
    async rightone() {
      var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
      var list3 = data.countryConfirmWeekCompareRankList;
      var datal = [];
      var titlename = [];
      list3.forEach((item) => {
        datal.push(item.rate);
        titlename.push(item.nation);
      });
      var chartDom = document.getElementById("main4");
      var myChart = echarts.init(chartDom);
      var option;
     var valdata = [];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      option = {
        title: {
          text: "主要疫情国家治愈率",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        xAxis: {
          show: false,
        },
        grid:{
         top: "20%",
          right: "0%",
          left: "15%",
          bottom: "18%",
        },
        yAxis: [
          {
            show: true,
            data: titlename.slice(0,5),
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value, index) {
                return ["{title|" + value + "} "].join("\n");
              },
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  // padding: 5,
                  align: "center",
                  width: 15,
                  height: 15,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: datal.slice(0,5),
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 40,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 右边第二个盒子
   async righttow() {
      var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
        var list5 = data.globalDailyHistory
       var date= []
        var dead = []
        var heal = []
        list5.forEach(item=>{
           date.push(item.date)
           dead.push(item.all.dead)
           heal.push(item.all.heal)
        })
      var chartDom = document.getElementById("main5");
      var myChart = echarts.init(chartDom);
      var option;
     
      option = {
    title: {
          text: "世界每周新增治愈和死亡人数",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['移动', '电信', '联通'],
        right: '4%',
        textStyle: {
            fontSize: 12,
            color: '#292f39'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: date
    }],
    yAxis: [{
        type: 'value',
        name: '单位（%）',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            }
        },
        splitLine: {
            lineStyle: {
                color: '#57617B'
            }
        }
    }],
    series: [{
        name: '治愈人数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 3
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: 'rgba(16,97,204, 0.3)'
                }, {
                    offset: 0.8,
                    color: 'rgba(17,235,210, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
       itemStyle: {
                normal: {
                    
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(16,97,204,1)'
                    }, {
                        offset: 1,
                        color: 'rgba(17,235,210,1)'
                    }])
                },
                emphasis: {
                color: 'rgb(0,196,132)',
                borderColor: 'rgba(0,196,132,0.2)',
                extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                borderWidth: 10
            }
            },
        data: dead
    }, {
        name: '死亡人数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 3
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(205,52,42, 0.5)'
                }, {
                    offset: 0.8,
                    color: 'rgba(235,235,21, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            },
        },
       itemStyle: {
                normal: {
                     
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(205,52,42,1)'
                    }, {
                        offset: 1,
                        color: 'rgba(235,235,21,1)'
                    }])
                },
                emphasis: {
                color: 'rgb(99,250,235)',
                borderColor: 'rgba(99,250,235,0.2)',
                extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                borderWidth: 10
            }
            },
        data: dead
    }  ]
};

      option && myChart.setOption(option);
    },
    async rihgtthree() {
      var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
      this.list4 = data.importStatis.TopList;
      console.log(99999, this.list4);
      var value = [];
      var name = [];
      this.list4.forEach((item) => {
        value.push(item.importedCase);
        name.push(item.name);
      });
      var chartDom = document.getElementById("main6");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "境外输入病情top10省份",
          x: "center",
          y: "9%",
          textStyle: {
            color: "#fff",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [40, 150],
            center: ["50%", "50%"],
            roseType: "area",

            data: [
              { value: 1202, name: "上海" },
              { value: 669, name: "广东" },
              { value: 389, name: "黑龙江" },
              { value: 303, name: "四川" },
              { value: 276, name: "陕西" },
              { value: 261, name: "内蒙古" },
              { value: 222, name: "福建" },
              { value: 205, name: "北京" },
              { value: 169, name: "天津" },
              { value: 91, name: "山西" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },

    // 获取地图
   async getmap(){
       var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
       var list7 = data.foreignList
       var arr = []
       list7.forEach(item=>{
    var obj = {}
    obj['value'] = item.confirm
    obj['name'] = item.name
    arr.push(obj)
       })
       arr.push({name:'中国',value:100})
       var chartDom = document.getElementById("main7");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            var value =params.value;
            return value ? params.name + " : " + value : params.name+': 0';
          },
        },
        visualMap: {
            type: 'piecewise', //分段型。
            // splitNumber: 6,
            // inverse: true,
             hoverLink :true,
            pieces: [{
                min: 0,
                max: 0,
                color: '#fff'
            }, {
                min: 1,
                max: 499,
                color: '#fef7c1'
            }, {
                min: 500,
                max: 4999,
                color: '#f6c461'
            }, {
                min: 5000,
                max: 9999,
                color: '#ee833c'
            }, {
                min: 10000,
                max: 100000,
                color: '#ec6948'
            }, {
                min: 100000,
                max: 500000,
                color: '#d15438'
            },{
                min: 500000,
                color: '#ab4730'
            }],
            left: 'left',
            top: 'bottom',
            textStyle: {
                color: '#fff'
            },
        },
        
        series: [
          {
            name: "World Population (2010)",
            type: "map",
            mapType: "world",
            // 地区名称映射
            nameMap: nameMap,
            roam: true,
            itemStyle: {
              emphasis: { label: { show: true } },
            },
            data: arr,
          },
        ],
      };
       option && myChart.setOption(option);
    },
    // 获取所有的数据
    async getlist() {
      var res = await http(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign"
      );
      var data = JSON.parse(res.data);
      console.log("所有数据", data);
    },
    //
  },

  mounted() {
    setInterval(() => {
      this.time = this.toTimeFormate(new Date());
    }, 100);
    // echarts宽度自适应
    var myChart = echarts.init(document.getElementById("main"));
    // var myChart3 = echarts.init(document.getElementById("main3"));
    window.addEventListener("resize", function () {
      if (myChart) {
        myChart.resize(); // 不报错
        // myChart3.resize(); // 不报错
      }
    });
    this.getlist(); // 所有的数据
    this.leftone(); // 左边第一个图标
    this.lefttow(); // 左边第二个盒子
    this.leftthree(); //左边第三个盒子
    this.rightone(); // 右边第一个盒子
    this.righttow(); // 右边第二个盒子
    this.rihgtthree(); // 右边第三个盒子
    this.getmap()
  },
};
</script>

<style lang="scss" scoped>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
.home {
  width: 100%;
  height: 1400px;
  background-image: url("../assets/image/bg.jpg"); //引入背景图片
  background-repeat: no-repeat; //不平铺
  background-size: 100% 100%; //大小100%
  .header {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    background-image: url("../assets/image/head_bg.png");
    background-repeat: no-repeat; //不平铺
    background-size: 100% 100%; //大小100%
    .box1 {
      flex: 1;
    }
    .box2 {
      flex: 1.5;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 23px;
      color: white;
    }
    .box3 {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #ccc;
    }
  }
  .cont {
    width: 100%;
    height: 92%;
    display: flex;
    flex-direction: row;
    .box1 {
      flex: 1.7;
      display: flex;
      flex-direction: column;
      .a1 {
        flex: 1;
        color: white;
      }
      .a2 {
        flex: 1;
        margin-top: 10px;
        color: white;
      }
      .a3 {
        flex: 1;
        margin-top: 10px;
        color: white;
      }
    }
    // 中间地图部分
    .box2 {
      flex: 3;
      position: relative;
      .img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 700px;
        height: 700px;
      }
      .img1 {
        width: 750px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .img2 {
        width: 750px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .box {
        width: 100%;
        height: 160px;
        background-color: #0a1f62;

        .c1 {
          width: 100%;
          height: 70px;
          line-height: 70px;
          text-align: center;
          .div1 {
            width: 24%;
            padding: 0 40px;
            color: #ffeb7b;
            font-size: 25px;
          }
        }
        .c2 {
          width: 100%;
          height: 70px;
          line-height: 70px;
          text-align: center;
          .div1 {
            width: 20%;
            padding: 0 40px;
            color: #ccc;
            font-size: 25px;
          }
        }
      }
    }
    .lj {
      width: 200px;
      height: 60px;
      background-color: pink;
      text-align: center;
      line-height: 60px;
      border-radius: 50px;
      margin-top: 30px;
      margin-left: 150px;
      background-color: #183b88;
      color: #ffeb7b;
    }
    .xc {
      width: 200px;
      height: 60px;
      background-color: pink;
      text-align: center;
      line-height: 60px;
      border-radius: 50px;
      margin-top: -60px;
      margin-left: 550px;
      background-color: #183b88;
      color: #fff;
    }
    .box3 {
      flex: 1.7;
      display: flex;
      flex-direction: column;
      .b1 {
        flex: 1;
        color: white;
        text-align: center;
      }
      .b2 {
        flex: 1;
        color: white;
      }
      .b3 {
        flex: 1;
        // background-color: pink;
        margin-top: 10px;
        color: white;
      }
    }
    #main7{
  width: 700px !important; 
  height: 700px !important;
  position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
}
  }
  .ss {
    animation: ss 10s infinite linear;
  }
  .ss1 {
    animation: ss1 10s infinite linear;
  }
  .ss2 {
    animation: ss2 10s infinite linear;
  }
  @keyframes ss {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes ss1 {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes ss2 {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}
</style>